<template>
    <div class="login-div">
        <el-row type="flex" justify="center">
            <el-col :span="5">
                <el-card class="login-card" :body-style="{ padding: '0px' }">
                    <el-row class="logo-row" type="flex" justify="center">
                        <el-col :span="9">
                            <el-link :underline="false"><el-image class="logo-img" :src="logoUrl"></el-image></el-link>
                        </el-col>
                    </el-row>
                    <el-form ref="form" :model="form" :rules="rules" size="medium">
                        <el-row class="form-row" type="flex" justify="center">
                            <el-col :span="18">
                                <el-form-item prop="userName">
                                    <el-input class="username" v-model.trim="form.userName" placeholder="用户名/手机号"></el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input type="password" class="password" v-model.trim="form.password" placeholder="密码"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="login('form')" class="login-btn" round size="small" :disabled="isDisabled">登录</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-row class="register-row" type="flex" justify="center">
                        <el-col :span="7">
                            <el-link :underline="false"><router-link to="/index">返回首页</router-link></el-link>
                        </el-col>
                        <el-col :span="7">
                            <el-link :underline="false"><router-link to="/register">前往注册</router-link></el-link>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import storage from '../../model/storage.js';

    export default {
        name: "Login",
        data() {
            return {
                msg: "这是login组件",
                from: null,
                logoUrl: require("../../assets/logo_64x64.png"),
                isDisabled: false,
                form: {
                    userName: "",
                    password: ""
                },
                rules: {
                    userName: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        { min: 2, max: 16, message: '用户名长度应在4-16位之间'}
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9]{6,18}$/, message: '密码应由6-18位字母和数字组成，不包含特殊字符。', trigger: ['blur', 'change'] }
                    ]
                }
            }
        },
        methods: {
            login(formName){
                this.$refs[formName].validate((valid) => {
                    var this01 = this;
                    if (valid) {
                        this01.isDisabled = true;
                        axios.post(
                            '/login',
                            this.form
                        ).then(response =>{
                            if(response.data.success){
                                storage.setSession("userInfo", response.data.data);
                                this.$store.commit('updateIsLogin', true);
                                this.$store.commit('updateUserInfo', response.data.data);
                                this.isDisabled = false;
                                //注意此处的this01.from是跳转到登陆页面之前的页面的路由，由于之前detail路由中已经存在
                                //书籍信息，故再次返回到detail时参数依旧存在
                                this01.$router.push(this01.from);
                            }else{
                                console.log(response.data.msg);
                                this.$message.error(response.data.msg);
                                this.isDisabled = false;
                            }
                        }).catch(error => {
                            console.log(error);
                            this01.isDisabled = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        mounted() {
        },
        beforeRouteEnter(to, from, next){
            //通过这种方式获取组件实例
            next(vm => {
                vm.from = from;
                if(vm.$route.params.needLogin){
                    vm.$message.error("您还没有登录，请登录后查看。");
                }
                let isLogin = vm.$store.state.isLogin;
                if(isLogin){
                    vm.$message.error('您已登录，无需再次登录');
                    next(from.path);
                }else{
                    next();
                }
            });
        }
    }
</script>

<style scoped>

    .el-row {
        height: auto;
    }

    .el-col {
        height: auto;
    }

    .login-div {
        background-color: #f0f0f0;
    }

    .login-card {
        /*height: 350px;*/
        margin-top: 100px;
    }

    .logo-row {
        margin-top: 30px;
    }

    .logo-img{
        width: 64px;
        height: 64px;
    }

    .logo-row .el-link {
        left: 50%;
        transform: translateX(-50%);
    }

    .form-row {
        margin-top: 30px;
    }
    
    .form-row .el-button{
        color: #9e9e9e;
    }

    .login-btn{
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .register-row {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 13px;
    }

    .register-row .el-link {
        color: #9e9e9e;
    }

    .router-link-active{
        text-decoration: none;
    }

    a {
        color: #9e9e9e;
        text-decoration: none;
    }
</style>